<template>
  <div class="mobile-preview-wrapper">
    <div class="mobile-header">客服设置</div>
    <div class="mobile-body">
      <div class="content-wrapper" v-if="config">
        <!-- 二维码区域 -->
        <div class="qr-code-section">
          <el-image :src="config.qrCode" fit="contain" class="qr-code-image">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
              <span>请在右侧上传二维码</span>
            </div>
          </el-image>
        </div>

        <!-- 标题 -->
        <h3 class="title">{{ config.title || '添加客服二维码' }}</h3>

        <!-- 信息列表 -->
        <div class="info-list">
          <div class="info-item">
            <span class="label">服务时间：</span>
            <span class="value">{{ config.workingHours || '早上 9:00 - 22:00' }}</span>
          </div>
          <div class="info-item">
            <span class="label">客服电话：</span>
            <span class="value">{{ config.phone || '请输入联系电话' }}</span>
          </div>
        </div>

        <!-- 底部按钮 -->
        <div class="footer-button">
          <el-button type="primary" round>保存二维码图片</el-button>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CustomerServicePreview",
  props: {
    // 接收来自父组件的配置数据
    config: {
      type: Object,
      default: () => ({})
    }
  }
};
</script>

<style scoped>
.mobile-preview-wrapper {
  width: 375px;
  height: 667px;
  border: 1px solid #ebedf0;
  background-color: #f7f8fa;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.mobile-header {
  height: 44px;
  line-height: 44px;
  text-align: center;
  font-weight: bold;
  border-bottom: 1px solid #eee;
  background-color: #fff;
  flex-shrink: 0;
}
.mobile-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
.content-wrapper {
  background-color: #fff;
  border-radius: 8px;
  padding: 30px 20px;
  text-align: center;
}
.qr-code-section {
  margin-bottom: 20px;
}
.qr-code-image {
  width: 180px;
  height: 180px;
  display: inline-block;
}
.image-slot {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
}
.image-slot i {
  font-size: 30px;
}
.image-slot span {
  font-size: 14px;
  margin-top: 10px;
}

.title {
  font-size: 16px;
  margin: 0 0 20px;
}

.info-list {
  color: #666;
  font-size: 14px;
  margin-bottom: 30px;
}
.info-item {
  margin-bottom: 10px;
}

.footer-button .el-button {
  width: 80%;
}
</style>
